import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from '../views/Home.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/useOverflow',
    name: 'useOverflow',
    component: () => import('@/views/test-hooks/UseOverflow.vue'),
  },
  {
    path: '/pausableWatch',
    name: 'pausableWatch',
    component: () => import('@/views/test-vueuse/watch/pausableWatch.vue'),
  },
  {
    path: '/useCssVar',
    name: 'useCssVar',
    component: () => import('@/views/test-vueuse/browser/useCssVar.vue'),
  },
  {
    path: '/useFullscreen',
    name: 'useFullscreen',
    component: () => import('@/views/test-vueuse/browser/useFullscreen.vue'),
  },
  {
    path: '/useUrlSearchParams',
    name: 'useUrlSearchParams',
    component: () => import('@/views/test-vueuse/browser/useUrlSearchParams.vue'),
  },
  {
    path: '/onKeyStroke',
    name: 'onKeyStroke',
    component: () => import('@/views/test-vueuse/sensors/onKeyStroke.vue'),
  },
  {
    path: '/useIdle',
    name: 'useIdle',
    component: () => import('@/views/test-vueuse/sensors/useIdle.vue'),
  },
  {
    path: '/useInterval',
    name: 'useInterval',
    component: () => import('@/views/test-vueuse/animation/useInterval.vue'),
  },
  {
    path: '/createGlobalState',
    name: 'createGlobalState',
    component: () => import('@/views/test-vueuse/state/createGlobalState/index.vue'),
  },
  {
    path: '/useStorage',
    name: 'useStorage',
    component: () => import('@/views/test-vueuse/state/useStorage.vue'),
  },
  {
    path: '/computedInject',
    name: 'computedInject',
    component: () => import('@/views/test-vueuse/component/computed-inject'),
  },
  {
    path: '/unrefElement',
    name: 'unrefElement',
    component: () => import('@/views/test-vueuse/component/unrefElement.vue'),
  },
  {
    path: '/useTemplateRefsList',
    name: 'useTemplateRefsList',
    component: () => import('@/views/test-vueuse/component/useTemplateRefsList.vue'),
  },
  {
    path: '/debouncedWatch',
    name: 'debouncedWatch',
    component: () => import('@/views/test-vueuse/watch/debouncedWatch.vue'),
  },
  {
    path: '/ignorableWatch',
    name: 'ignorableWatch',
    component: () => import('@/views/test-vueuse/watch/ignorableWatch.vue'),
  },
  {
    path: '/throttledWatch',
    name: 'throttledWatch',
    component: () => import('@/views/test-vueuse/watch/throttledWatch.vue'),
  },
  {
    path: '/until',
    name: 'until',
    component: () => import('@/views/test-vueuse/watch/until.vue'),
  },
  {
    path: '/watchAtMost',
    name: 'watchAtMost',
    component: () => import('@/views/test-vueuse/watch/watchAtMost.vue'),
  },
  {
    path: '/controlledComputed',
    name: 'controlledComputed',
    component: () => import('@/views/test-vueuse/utilities/controlledComputed.vue'),
  },
  {
    path: '/controlledRef',
    name: 'controlledRef',
    component: () => import('@/views/test-vueuse/utilities/controlledRef.vue'),
  },
];

const router = createRouter({
  // history: createWebHistory(process.env.BASE_URL),
  history: createWebHistory(),
  routes,
});

export default router;
